<template>
  <div>

    <el-cascader v-model="value" :show-all-levels="false" :options="options"
      :props="{ expandTrigger: 'hover', multiple: true }" @change="handCascaderChange"></el-cascader>

  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }]
        }]
      }]
    }
  },
  methods: {
    handCascaderChange(val) {
      // console.log(val)
      // 单选（multiple=false） 时， val = ["zhinan","shejiyuanze","yizhi"]
      // 多选（multiple=true） 时， val = [["zhinan","shejiyuanze","yizhi"]]

      // let vald = search(this.options, 'yizhi') // ["zhinan","shejiyuanze","yizhi"]
      // console.log("multiple", vald);
      // // 单选和多选赋值有一点不同
      // if (multiple) {
      //   this.value = [vald]  // this.value：el-cascader v-model 绑定的变量
      // } else {
      //   this.value = vald
      // }
      // // console.log(this.value);

    },

  }
}
function search(object, value) {
  for (var key in object) {
    if (object[key].value == value) return [object[key].value];
    if (object[key].children && Object.keys(object[key].children).length > 0) {
      var temp = search(object[key].children, value);
      if (temp) return [object[key].value, temp].flat();
    }
  }
}

</script>

<style lang="less" scoped>

</style>
